<template>
  <div class="out-box">
    <div class="content-ab">
      <div class="nav-content">
        <div class="left-font">#ABOUT</div>
        <div>
          <div class="serv-con">
            让创意更落地，<br />
            让生意更容易！
          </div>
          <scrollHandle>
            <div class="base-font" style="margin-top: 100px">
              我们是 Light 里特创意，专注于创意设计与营销结果。
              通过落地性的品牌策略，创造实际的商业价值。
              用更精准的市场洞察，打造更高效的品牌传达，让设计不仅是视觉表现，更是与消费者建立深层情感连接。
              让创意成为生意增长的核心驱动力，为企业创造持久而独特的价值。
            </div>
          </scrollHandle>
          <scrollHandle>
            <div class="serv-con" style="margin-top: 150px">从创意，到营销</div>
          </scrollHandle>
          <scrollHandle>
            <div class="base-font" style="margin-top: 100px">
              专注于从创意设计到电商营销，搭建全渠道营销闭环。
              里特真正实现了创新服务于销售，从产品概念、包装设计到线上销售，品效协同，融合营销与创意，打造全链路营销服务。
              通过整合内容场、社交场、交易场，三场合一，让产品从创意到落地再到销售实现无缝衔接和高效转化。
              借助我们的创意与策略，让每一个品牌都能释放最大潜能，助力企业持续成长。
            </div>
          </scrollHandle>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scrollHandle from "@/components/scrollHandle.vue";
export default {
  components:{
    scrollHandle
  },
  methods: {
    navClick(val) {
      this.$emit("changeNav", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.out-box {
  background-color: #fff;
  width: 100%;
}

.content-ab {
  padding: 300px 100px 230px;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

.nav-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.left-font {
  font-size: 150px;
  line-height: 130px;
  font-family: "BebasFontEnB";
}

.nav-list {
  display: flex;
  align-items: center;
}
.base-font {
  font-size: 30px;
  line-height: 44px;
  text-align: justify;
}

.serv-con {
  font-size: 50px;
  line-height: 72px;
  font-family: "BebasFontB";
}
</style>